<template>
    <div class="orderStatsitcs">
        <div class="chart-wrap">
            <div :class="`${item.type}`" class="chart-box" v-for="item in chartList" :key="item.type">
                <!-- {{ item.select }} -->
                <div class="select-box">
                    {{ getTitle(item) }} &nbsp;&nbsp;<el-date-picker v-if="['date', 'month', 'year'].includes(item.type)"
                        v-model="item.select" :type="item.type" style="width: 160px;" :format="formatString(item)"
                        :value-format="formatString(item)" />
                    <el-select v-else v-model="item.select" style="width: 120px;" clearable>
                        <el-option v-for="item in seasonOption" :key="item.value" :label="item.text"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="chart-dom">
                    <chartPane :chartOption="item.options" :id="item.type"> </chartPane>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

import { orderStatis } from "@/api/orderInfo"
import dayjs from "dayjs"

// 下拉选择的数据
let seasonOption = []
function getSeasonOptions() {
    let option = []
    let obj = {
        1: "一",
        2: "二",
        3: "三",
        4: "四",
    }
    for (let key in obj) {
        option.push({
            text: `第${obj[key]}季度`,
            value: new Date().getFullYear() + '-' + key
        })
    }
    seasonOption = option
}
function getSeason() {
    const currentMonth = new Date().getMonth();
    // 计算当前季度
    const quarter = Math.floor(currentMonth / 3) + 1;
    return new Date().getFullYear() + '-' + quarter
}
// 下拉选择的格式化
function formatString(item) {
    return item.type == 'date' ? 'YYYY-MM-DD' : item.type == 'month' ? 'YYYY-MM' : 'YYYY'
}

const chartList = ref([
    {
        id: 1,
        type: 'date',
        dayType: "日",
        options: {},
        select: dayjs().format("YYYY-MM-DD")
    },
    {
        id: 2,
        type: 'month',
        dayType: "月",
        options:{},
        select: dayjs().format("YYYY-MM")
    },
    {
        id: 3,
        type: 'season',
        dayType: "季",
        options:{},
        select: getSeason()
    },
    {
        id: 4,
        type: 'year',
        dayType: "年",
        options: {},
        select: dayjs().format("YYYY")
    }
])
// 监听下拉选择框来判断是那个echarts图标需要更新
// 日
watch(() => chartList.value[0].select, (newV) => {
    let params = {
        type: '日',
        date: newV
    }
    getOrderStatis(params, 0)
},
    {
        deep: true,
        immediate: true
    })
//月 
watch(() => chartList.value[1].select, (newV) => {
    let params = {
        type: '月',
        date: newV
    }
    getOrderStatis(params, 1)
},
    {
        deep: true,
        immediate: true
    })
//季
watch(() => chartList.value[2].select, (newV) => {
    let params = {
        type: '季',
        date: newV
    }
    getOrderStatis(params, 2)
},
    {
        deep: true,
        immediate: true
    })
// 年
watch(() => chartList.value[3].select, (newV) => {
    let params = {
        type: '年',
        date: newV
    }
    getOrderStatis(params, 3)
},
    {
        deep: true,
        immediate: true
    })


// 获取数据
function getOrderStatis(params, index) {
    orderStatis(params).then((res) => {
        if (res.code == 200) {
            constructOption(res.data, index)
        }
    })
}
// 构造echarts 的 option
function constructOption(data, index) {
    // 构造seriseObj
    let seriesObj = {}
    let timeArr = []
    let legendArr = Object.keys(data[0]).filter((item) => {
        if (item != 'time') {
            seriesObj[item] = []
        }
        return item != 'time'
    })
    data.forEach((item) => {
        for (let key in item) {
            if (key in seriesObj) {
                seriesObj[key].push(item[key])
            } else {
                timeArr.push(item[key])
            }

        }
    })
    let series = [
        {
            name: "",
            type: 'bar',
            data: [50, 40, 60, 70, 80, 40, 30, 70], // 对应日期的数量
            barMaxWidth: 10,
            itemStyle: {
                color: 'rgba(183, 232, 135, 1)' // 柱子的颜色
            }
        },
        {
            name: "",
            type: 'bar',
            data: [70, 80, 50, 40, 60, 40, 30, 70],
            barMaxWidth: 10,
            itemStyle: {
                color: 'rgba(178, 150, 255, 1)'
            }
        },
        {
            name: "",
            type: 'bar',
            data: [40, 30, 70, 70, 80, 50, 40, 60],
            barMaxWidth: 10,
            itemStyle: {
                color: 'rgba(255, 216, 89, 1)'
            }
        }
    ]
    Object.keys(seriesObj).forEach((key, index) => {
        series[index].name = key
        series[index].data = seriesObj[key]
    })
    let option = {
        tooltip: {},
        legend: {
            data: legendArr,
            top: "3%"
        },
        xAxis: {
            type: 'category',
            data: timeArr // 日期
        },
        yAxis: {
            name: '单位：个',
            type: 'value'
        },
        grid: {
            // top: '10%', // 设置图表距离容器顶部的距离
            bottom: '10%' // 设置图表距离容器底部的距离
        },
        series
    }
    chartList.value[index].options = option
    console.log("🚀 ~ constructOption ~ chartList.value:", chartList.value)
}

function getTitle({dayType}) {
    if(dayType == '日') {
        return '日期'
    }else if(dayType == '月') {
        return '月份'
    }else if (dayType ==  '季') {
        return '季度'
    }else if(dayType == '年') {
        return '年份'
    }  
}

onMounted(() => {
    getSeasonOptions()
})


</script>

<style lang="scss" scoped>
.orderStatsitcs {
    height: 100%;
    width: 100%;
}

.chart-wrap {
    display: grid;
    height: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
    grid-template-columns: repeat(2, 1fr);
    /* 两列 */
    grid-template-rows: repeat(2, 1fr);
    /* 两行 */
    gap: 10px;
    /* 格子间隔 */
}

.select-box {
    display: flex;
    align-items: center;
}

.chart-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
}

.chart-dom {
    height: 90%;
}
</style>